import React, { useMemo, useCallback } from "react";
import SwiperCore from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import { DeliveryBlock, NewArrivalsBlock } from "./const";
import { PromotionBlockProps } from "./type";

SwiperCore.use([Autoplay]);

const PromotionBlock: React.FC<PromotionBlockProps> = () => {
  const blocks = useMemo(
    () => [
      <DeliveryBlock key="delivery" />,
      <NewArrivalsBlock key="newArrivals" />,
    ],
    []
  );

  const renderBlock = useCallback(
    (block: JSX.Element, index: number) => (
      <SwiperSlide key={index}>{block}</SwiperSlide>
    ),
    []
  );

  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={1}
      autoplay={{
        delay: 3000,
        disableOnInteraction: false,
        reverseDirection: true,
      }}
    >
      {blocks.map((block, index) => renderBlock(block, index))}
    </Swiper>
  );
};

export default React.memo(PromotionBlock);
